<template>
  <div class="Goods">
    <div class="ele-key-search">
      <div class="left">
        <div>
          <span>分类:</span>
          <el-select v-model="commdityType" fliterable clearable @change="getCommodityTypeListByid">
            <el-option
              v-for="(item,index) in commodityTypeList"
              :key="index"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
          <el-select v-model="commditySubType" fliterable clearable>
            <el-option
              v-for="(item,index) in commodityTypeChildList"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="goodsType">
          <span style="padding-right:10px">商品状态</span>
          <el-select
            v-model="commdityState"
            class="ele-select"
            @change="handelGoodsState"
          >
            <el-option value="1" label="销售中" />
            <el-option value="0" label="未销售" />
          </el-select>
        </div>
      </div>
      <div class="right">
        <el-input
          v-model="keySearch"
          style="width:200px"
          maxlength="20"
          placeholder="请输入商品名称"
          suffix-icon="search"
        />
        <el-button type="primary" @click="handelSearch">确认</el-button>
      </div>
    </div>
    <div class="ele-table">
      <el-table
        ref="commodityTable"
        v-loading="dialogShow"
        height="400"
        :data="bindataAddCommodity"
        :header-cell-style="getRowClass"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" />
        <el-table-column label="商品" prop="goods" width="200" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div class="column-commodity">
              <div>
                <TableColumnGoodsImage :src="scope.row.picUrl" :img-size="'60px'" />
                <!--                  <img :src="scope.row.goodsImg.includes('https')? scope.row.goodsImg : baseUrl + scope.row.goodsImg" alt="">-->
              </div>
              <div>
                <span
                  style="display:inline-block;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;width:80px;line-height: 60px;"
                >{{ scope.row.name }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="类型" prop="type">
          <template slot-scope="scope">
            <span v-if="scope.row.goodsType == 'lease'">租赁</span>
            <span v-else>售卖</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="state">
          <template slot-scope="scope">
            <span v-if="scope.row.isOnSale == '0'">未销售</span>
            <span v-if="scope.row.isOnSale == '1'">销售中</span>
          </template>
        </el-table-column>
        <!--          <el-table-column label="操作" align="center" header-align="right">
            <template slot-scope="scope">
              <el-button
                type="primary"
                plain
                @click="handelAddRows(scope.row)"
              >添加</el-button>
            </template>
          </el-table-column>-->
      </el-table>
    </div>
    <div class="ele-footer">
      <div class="left">
        <el-button plain size="mini" @click="handelAllRow">全选</el-button>
        <el-button plain size="mini" @click="addGoods">新增商品</el-button>
        <el-button
          plain
          size="mini"
          @click="handelAllSelect"
        >添加</el-button>
      </div>
      <div class="right">
        <el-pagination
          :current-page="pages.pageIndex"
          :page-sizes="[20, 30, 40, 50]"
          :page-size="pages.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pages.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import TableColumnGoodsImage from '@/components/TableColumnGoodsImage'
import { getCommodityCategoryList } from '@/api/commodity'
import { unWarehouseGoodsList } from '@/api/customAPI/shop/GloudWarehouse'
export default {
  components: { TableColumnGoodsImage },
  props: {
    visible: { type: Boolean, default: false },
    isSelect: {
      type: Boolean,
      default: false
    },
    warehouseId: {
      type: [Number, String],
      default: null
    }
  },
  data() {
    return {
      showHide: false,
      isRelate: 0,
      keySearch: '',
      pages: { pageIndex: 1, pageSize: 20, total: 0 },
      bindataAddCommodity: [],
      commditySubType: '',
      commdityState: '',
      commdityType: '',
      commodityTypeList: [],
      commodityTypeChildList: [],
      dialogShow: false,
      allSelect: []
    }
  },
  watch: {
    visible(newValue, oldValue) {
      // this.dialogShow = newValue
    }
  },
  mounted() {
    this.loadding()
    this.goodsTypeList()
  },
  activated() {
    this.loadding()
    this.goodsTypeList()
  },
  methods: {
    addGoods() {
      this.dialogShow = false
      this.$router.push({ name: 'AddGoods' })
    },
    goodsTypeList() {
      getCommodityCategoryList().then(response => {
        this.commodityTypeList = response.data.data
      })
    },
    getCommodityTypeListByid(data) {
      this.commditySubType = ''
      if (this.commdityType !== '') {
        this.commodityTypeList.forEach(item => {
          if (item.value === data) {
            this.commodityTypeChildList = item.children
          }
        })
      }
    },
    /** 刷新 */
    Refresh() {
      this.commditySubType = ''
      this.commdityState = ''
      this.commdityType = ''
      this.loadding()
    },
    handelType_b(v) {
      this.loadding()
    },
    handelGoodsState(v) {
      this.loadding()
    },
    handelType_a(v) {
      this.loadding()
    },
    loadding() {
      this.dialogShow = true
      const data = {
        shopId: localStorage.getItem('shopId'),
        keySearch: this.keySearch || '',
        commdityType: this.commdityType || '',
        commditySubType: this.commditySubType || '',
        commdityState: this.commdityState || '',
        page: this.pages.pageIndex,
        limit: this.pages.pageSize,
        warehouseId: this.warehouseId
      }
      if (this.storeId) {
        data['storeId'] = this.storeId
        data['isRelate'] = this.isRelate
      }
      unWarehouseGoodsList(data).then(inf => {
        this.dialogShow = false
        this.bindataAddCommodity = inf.data.data.data
        this.pages.total = inf.data.data.total
      })
        .catch(err => {
          this.dialogShow = false
          console.log(err)
        })
    },
    /**  显示条目
     *  @param size 一页显示的条目
     */
    handleSizeChange(size) {
      this.pages.pageSize = size
      this.loadding()
      this.$emit('handleSizeChange', size)
    },
    /**  当前页
     *  @param index 显示页
     */
    handleCurrentChange(index) {
      this.pages.pageIndex = index
      this.loadding()
      this.$emit('handleCurrentChange', index)
    },
    /**  搜索
     *  @param val 搜索值
     */
    handelSearch() {
      this.loadding()
    },
    handelAllSelect() {
      if (this.allSelect.length > 0) {
        this.Refresh()
        this.$emit('handelAllSelect', this.allSelect)
        this.dialogShow = false
      } else {
        this.$message.warning('请先选择')
      }
    },
    /**  添加
     *  @param row 行数据
     */
    handelAddRows(row) {
      this.$emit('handelAddRows', row)
    },
    handelAllRow() {
      this.$refs.commodityTable.toggleAllSelection()
    },
    handleSelectionChange(row) {
      this.allSelect = row
      this.$emit('selectionChange', row)
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#f3f3f3'
      } else {
        return ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.Goods {
  .cus-data {
      display: flex;
      .left {
        width: 150px;
        height: 150px;
        margin-right: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        flex-grow: 1;
        .form-last-item-0 {
          margin-top: -20px;
          p {
            margin: 0;
          }
        }
        .form-last-item-1 {
          margin-top: 50px;
          .el-button {
            width: 200px;
          }
        }
      }
    }
  // 添加商品的style
  .def-b {
      border-left: 4px solid rgb(55, 131, 255);
      padding-left: 10px;
    }
  .ele-key-search {
      display: flex;
      justify-content: space-between;
      .el-select {
        width: 120px;
      }
      .left {
        .goodsType {
          margin-left: 15px;
        }
      }
      .left,
      .right {
        display: flex;
        justify-content: flex-start;
      }
    }
  .ele-table {
      margin-top: 40px;
      .column-commodity {
        display: flex;
        align-items: flex-start;
        div:first-child {
          width: 60px;
          height: 60px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        div:last-child {
          span {
            margin-left: 20px;
          }
        }
      }
    }
  .ele-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 30px 0px;
      .left {
        .el-button {
          width: 100px;
        }
      }
    }
}
</style>
